<!--安全码找回-->
<template>
    <div class="securityCode">
        <p class="title">安全码找回密码</p>
        <div class="rung">
            <img src="../assets/img/userPeopleIcon.png">
            <input type="text" placeholder="请输入账号" v-model="username">
        </div>
        <div class="rung">
            <img src="../assets/img/lockIcon.png" class="lock">
            <input type="text" placeholder="请输入安全码" v-model="accesskey">
        </div>
        <div class="eCode">
            <div class="l">
                <img src="../assets/img/eCodeIcon.png">
                <input type="text" placeholder="验证码" v-model="code">
            </div>
            <div class="r">
                <img :src=src @click="changeVcode">
            </div>
        </div>
        <div class="submit" @click="submit">提交</div>
    </div>
</template>

<script>
    import Url from "../untils/configUrl";
    import {post} from "../untils/https"
    import {Toast} from 'vant';


    export default {
        data() {
            return {
                src:null,
                username:null,
                accesskey:null,
                code:null,
                randomStr:null
            }
        },
        methods:{
            submit(){
                if (!this.username) {
                    Toast({
                        duration: 2000,
                        message: '请输入账号！',
                    });
                    return
                }
                if (!this.accesskey) {
                    Toast({
                        duration: 2000,
                        message: '请输入安全码！',
                        onClose: function () {
                        }
                    });
                    return
                }
                if (!this.code) {
                    Toast({
                        duration: 2000,
                        message: '请输入验证码！',
                        onClose: function () {
                        }
                    });
                    return
                }
                Toast.loading({
                    mask: true,
                    message: '加载中...',
                    duration:0
                });
                post(Url.urlConfig.keyFindPass, {
                    username: this.username,
                    accesskey: this.accesskey,
                    codeToken: this.randomStr,
                    code: this.code
                }).then((data) => {
                    Toast.clear();
                    if (data.code === 200) {
                        setTimeout(()=>{
                            this.$router.push("/newpassword?uid="+data.data.uid)
                        },600)
                    }
                },()=>{
                    Toast.clear();
                });
            },
            //切换验证码
            requestCode() {
                let UrlCode = Url.urlConfig.verfiyIndex,
                    randomStr = this.randomString();
                this.randomStr = randomStr;
                post(UrlCode, {
                    codeToken: randomStr
                }).then((data) => {
                    this.src = "data:img/png;base64," + data.data.code64
                }, () => {
                })
            },
            //生成32位置随机唯一数
            randomString(len) {
                len = len || 32;
                let $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
                let maxPos = $chars.length;
                let pwd = '';
                for (let i = 0; i < len; i++) {
                    pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
                }
                return "H5_" + pwd;
            },
            changeVcode() {
                this.requestCode();
            }
        },
        created(){
            this.requestCode();
        }
    }
</script>

<style scoped lang="less">
    .securityCode {
        width: 100%;
        height: 100%;
        overflow: hidden;

        .title {
            font-size: 48px;
            font-family: PingFangSC-Semibold;
            font-weight: bold;
            color: rgba(29, 30, 44, 1);
            margin: 80px 0 79px 65px;
        }

        .rung {
            display: flex;
            align-items: center;
            width: 100%;
            height: 90px;
            padding-left: 94px;
            box-sizing: border-box;
            background-color: #fff;
            margin-bottom: 30px;
            img {
                width: 35px;
                height: 35px;
                margin-right: 30px;
            }
            .lock {
                width: 43px;
                height: 43px;
                margin-left: 5px;
                margin-right: 20px;
            }

            input {
                display: flex;
                align-items: center;
                width: 500px;
                height: 100%;
                font-size: 28px;

                &::-webkit-input-placeholder {
                    font-size: 28px;
                    font-family: PingFangSC-Regular;
                    font-weight: 400;
                    color: rgba(182, 182, 182, 1);
                }

                &:-ms-input-placeholder {
                    font-size: 28px;
                    font-family: PingFangSC-Regular;
                    font-weight: 400;
                    color: rgba(182, 182, 182, 1);
                }
            }
        }

        .eCode {
            width: 100%;
            height: 90px;
            display: flex;
            .l {
                display: flex;
                align-items: center;
                width: 309px;
                height: 90px;
                background-color: #ffffff;
                padding-left: 102px;
                box-sizing: border-box;
                img {
                    width: 36px;
                    height: 36px;
                    margin-right: 20px;
                }
                input {
                    width: 100px;
                    &::-webkit-input-placeholder {
                        font-size: 28px;
                        font-family: PingFangSC-Regular;
                        font-weight: 400;
                        color: rgba(182, 182, 182, 1);
                    }

                    &:-ms-input-placeholder {
                        font-size: 28px;
                        font-family: PingFangSC-Regular;
                        font-weight: 400;
                        color: rgba(182, 182, 182, 1);
                    }
                }
            }
            .r {
                margin-left: 39px;
                img {
                    width: 204px;
                    height: 90px;
                }
            }
        }

        .submit {
            width:622px;
            height:100px;
            background:rgba(98,125,241,1);
            border-radius:50px;
            font-size:28px;
            font-family:PingFangSC-Regular;
            font-weight:bold;
            color:rgba(255,255,255,1);
            text-align: center;
            line-height: 100px;
            margin: 170px auto 0;
        }

    }
</style>
